<template>
	<view class="help-content">
		<view class="list-content">
			<block v-for="(item,index) in messageList" :key="index">
				<view class="message-item" v-if="item.type==='mine'">
					<view class="message-content">{{item.message}}</view>
					<image :src="item.avatar" class="avatar"></image>
				</view>
				<view class="position-list" v-else>
					<view style="text-align: center;">为您匹配到以下岗位</view>
					<swiper style="width: 100%" indicator-dots="true">
						<swiper-item v-for="(item1,index1) in item.position">
							<view @click="navigate('/page_other/job_hunting/job_detail/index?id='+item1.id)"
								class="list-item">
								<view class="list-info">
									<view class="title">{{item1.jobTitle}}</view>
									<view class="address">酒泉 / {{item1.jobAddress}}</view>
									<view class="label-block">
										<view class="label-item" v-for="label in item1.label">{{label}}</view>
									</view>
									<view class="wage">{{item1.minSalary}}-{{item1.maxSalary}}元
									</view>
								</view>
								<view class="detail-info">
									<view class="name">{{item1.comRecruiters.comPosition}}</view>
									<image mode="aspectFill" :src="item1.comRecruiters.user.faceUrl" class="photo">
									</image>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</block>
		</view>
		<view class="ctrl-content">
			<view class="TUI-message-input-main" @longpress="handleLongPress" @touchmove="handleTouchMove"
				@touchend="handleTouchEnd"
				style="display: flex; justify-content: center; font-size: 32rpx; font-family: PingFangSC-Regular;">
				<text>{{ text }}</text>
			</view>
		</view>
		<view class="record-modal" v-if="popupToggle" @longpress="handleLongPress" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
			<view class="wrapper"><view class="modal-loading"></view></view>
			<view class="modal-title">{{ title }}</view>
		</view>
	</view>
</template>

<script>
	import {uploadFile} from '@/api/file.js'
	import config from '@/config.js'
	export default {
		data() {
			return {
				messageList:[
				],
				recorderManager:null,
				
				title: ' ',
				startPoint: 0,
				notShow: false,
				isShow: true,
				recordTime: 0,
				recordTimer: null,
				popupToggle: false,
				isRecording: false,
				canSend: true,
				text: '按住说话',
			}
		},
		beforeMount() {
			this.recorderManager = uni.getRecorderManager();
			this.recorderManager.onStop(res => {
				// 兼容 uniapp 打包app，duration 和 fileSize 需要用户自己补充
				// 文件大小 ＝ (音频码率) x 时间长度(单位:秒) / 8
				let msg = {
					duration: res.duration ? res.duration : this.recordTime * 1000,
					tempFilePath: res.tempFilePath,
					fileSize: res.fileSize ? res.fileSize : ((48 * this.recordTime) / 8) * 1024
				};
				uni.hideLoading();
				// 兼容 uniapp 语音消息没有duration
				if (this.canSend) {
					if (msg.duration < 1000) {
						uni.showToast({
							title: '录音时间太短',
							icon: 'none'
						});
					} else {
						uni.showLoading({
							title:'正在识别',
							mask:true
						})
						console.log(res)
						// res.tempFilePath 存储录音文件的临时路径
						uni.uploadFile({
							url:config.requestUrl+'/voiceMatching',
							filePath:res.tempFilePath,
							header: { "Content-Type": "multipart/form-data" },
							name:'file',
							success: (e) => {
								uni.hideLoading()
								let data=JSON.parse(e.data);
								if(data.code==200){
									this.messageList.push({message:data.data.msg,avatar:this.$store.getters.user.faceUrl,type:'mine'});
									
									if(data.data.list.length>0){
										this.showToast('为您匹配到以下岗位')
										this.messageList.push({position:data.data.list});
									}else{
										this.showToast('暂无匹配的岗位')
									}
								}else{
									this.showToast(data.msg)
								}
							},
							fail:()=> {
								uni.hideLoading()
								this.showToast('录音上传失败')
							}
						})
					}
				}
			
				this.setData({
					startPoint: 0,
					popupToggle: false,
					isRecording: false,
					canSend: true,
					title: ' ',
					text: '按住说话'
				});
			});
		},
		methods: {
			navigate(url) {
				if (url) {
					uni.navigateTo({
						url
					})
				}
			},
			handleLongPress(e) {
				this.recorderManager.start({
					duration: 60000,
					// 录音的时长，单位 ms，最大值 600000（10 分钟）
					sampleRate: 44100,
					// 采样率
					numberOfChannels: 1,
					// 录音通道数
					encodeBitRate: 192000,
					// 编码码率
					format: 'aac' // 音频格式，选择此格式创建的音频消息，可以在即时通信 IM 全平台（Android、iOS、微信小程序和Web）互通
				});
				this.setData({
					startPoint: e.touches[0],
					title: '正在录音',
					// isRecording : true,
					// canSend: true,
					notShow: true,
					isShow: false,
					isRecording: true,
					popupToggle: true,
					recordTime: 0,
					text: '抬起停止',
				});
				this.recordTimer = setInterval(() => {
					this.recordTime++;
					if(this.recordTime==50){
						uni.vibrateLong()
					}
					if(this.recordTime>=50){
						this.text=`${60-this.recordTime}后停止录音`
					}
				}, 1000);
			},
			
			// 录音时的手势上划移动距离对应文案变化
			handleTouchMove(e) {
				if (this.isRecording) {
					if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 100) {
						this.setData({
							text: '抬起停止',
							title: '松开手指，取消发送',
							canSend: false
						});
					} else if (this.startPoint.clientY - e.touches[e.touches.length - 1].clientY > 20) {
						this.setData({
							text: '抬起停止',
							title: '上划可取消',
							canSend: true
						});
					} else {
						this.setData({
							text: '抬起停止',
							title: '正在录音',
							canSend: true
						});
					}
				}
			},
			// 手指离开页面滑动
			handleTouchEnd() {
				this.setData({
					startPoint: 0,
					popupToggle: false,
					isRecording: false,
					title: ' ',
					text: '按住说话'
				});
				clearInterval(this.recordTimer);
				uni.hideLoading();
				this.recorderManager.stop();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.help-content {
		width: 100vw;
		height: 100vh;

		.list-content {
			height: calc(100% - 160rpx);
			width: 100%;
			overflow-y: scroll;
			padding: 0 30rpx;

			.message-item {
				width: calc(100% - 100rpx);
				margin: 30rpx 0;
				margin-left: 100rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-end;

				.avatar {
					width: 70rpx;
					height: 70rpx;
					border-radius: 5px;
					margin-left: 30rpx;
				}

				.message-content {
					max-width: calc(100% - 100rpx);
					padding: 30rpx;
					border: 1px solid rgba(0, 110, 255, 0.30);
					background: rgba(0, 110, 255, 0.10);
					border-radius: 10px 2px 10px 10px;
					white-space: pre-wrap;
					word-break: normal;
					font-size: 28rpx;
				}
			}
		}

		.ctrl-content {
			height: 160rpx;
			padding: 30rpx 40rpx;
			padding-bottom: 60rpx;
			background: #f1f1f1;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			.TUI-message-input-main{
				width: 400rpx;
				height: 70rpx;
				background: #fff;
				border-radius: 5px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.list-item {
			width: calc(100% - 60rpx);
			margin: 30rpx;
			background: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-bottom: 20rpx;
			box-shadow: 0 0 10px 0 #dfdfdf;

			.detail-info {
				width: 180rpx;
				height: 200rpx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;

				.name {
					width: 110rpx;
					font-size: 24rpx;
					color: #999;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					text-align: center;
					text-indent: 15rpx;
				}

				.photo {
					width: 70rpx;
					height: 70rpx;
					border-radius: 100%;
					background: #efefef;
				}

				.apply-btn {
					border: 1px solid #FE7526;
					border-radius: 8rpx;
					color: #FE7526;
					font-size: 24rpx;
					padding: 8rpx 28rpx;
					position: relative;
					left: 30rpx;
				}
			}

			.list-info {
				width: calc(100% - 180rpx);
				display: flex;
				flex-direction: column;

				>view {
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.title {
					color: #000;
					font-weight: bold;
					font-size: 34rpx;
					width: 350rpx;
				}

				.address {
					color: #999;
					font-size: 26rpx;
					margin-top: 20rpx;
				}

				.label-block {
					font-size: 24rpx;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: left;
					margin-top: 20rpx;

					.label-item {
						padding: 8rpx 20rpx;
						background: #F5F6F8;
						color: #999;
						margin: 0 10rpx 20rpx 0;
					}
				}

				.wage {
					color: #FE7526;
					font-size: 36rpx;
					font-weight: bold;

					.unit {
						font-size: 28rpx;
						font-weight: normal;
					}
				}
			}
		}
	}
	.record-modal {
		height: 300rpx;
		width: 60vw;
		background-color: #000;
		opacity: 0.8;
		position: fixed;
		top: 670rpx;
		z-index: 9999;
		left: 20vw;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
	}
	
	.record-modal .wrapper {
		display: flex;
		height: 200rpx;
		box-sizing: border-box;
		padding: 10vw;
	}
	
	.record-modal .wrapper .modal-loading {
		opacity: 1;
		width: 40rpx;
		height: 16rpx;
		border-radius: 4rpx;
		background-color: #006fff;
		animation: loading 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
	}
	
	.modal-title {
		text-align: center;
		color: #fff;
	}
	@keyframes loading {
		0% {
			transform: translate(0, 0)
		}
	
		50% {
			transform: translate(30vw, 0);
			background-color: #f5634a;
			width: 40px;
		}
	
		100% {
			transform: translate(0, 0);
		}
	}
</style>
